<template>
  <div v-if="user">
    <div style="margin: 10px;">
      <van-button type="primary" @click="doMatch()" style="width: 100%;">匹配用户</van-button>
    </div>
    <van-card v-for="user in userList"
      :desc=user.profile
      :title=user.username
      :thumb=user.avatarUrl
      :tag="getGenderText(user.gender)"
      >
      <template #tags>
        <van-tag plain type="primary" v-for="tag in user.tags" style="margin-right: 8px;margin-top: 8px;">
          {{tag}}
        </van-tag>
      </template>
      <template #footer>
        <van-button v-if="user.gender == 1" size="mini" @click="checkUser(user.phone)">联系他</van-button>
        <van-button v-else size="mini" @click="checkUser(user.phone)">联系她</van-button>
      </template>
    </van-card>
  </div>
  <van-empty v-else description="未登录" />
  


</template>

<script setup lang="ts">


import {onMounted, ref} from 'vue';
import myAxios from '../../plugins/myAxios';

const userList = ref();



onMounted(()=>{
  getUserList()
  getUser()
})
const user = ref();
const getUser = async()=>{
  await myAxios.get('/user/current').then((res)=>{
    user.value = res.data.data;
  })
}
const getUserList = async()=>{
  const userListData = await myAxios.get('/user/index',{
    params:{
      pageSize:8,
      pageNum:3
    }
  })
  .then((response)=>{
      return response
    }).catch((error)=>{
      console.error(error);
    })
    if(userListData){
      userListData.data.data.records.forEach((user: { tags: string; })=>{
        if(user.tags){
          user.tags = JSON.parse(user.tags)
        }
      })
      userList.value = userListData.data.data.records
    }
}

const getGenderText = (gender:any)=>{
  if(gender == 1) return '男' 
  else return '女'
}

const doMatch =async()=>{
  const num = 10;
  const res = await myAxios.get('/user/match',{
    params:{
      num,
    }
  })
  if(res){
      res.data.data.forEach((user: { tags: string; })=>{
        if(user.tags){
          user.tags = JSON.parse(user.tags)
        }
      })
      userList.value = res.data.data
  }
}
const checkUser=(phone:number)=>{
  alert(phone)
}

</script>



<style scoped>

</style>